<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
      <script src="../js/vue.min.js"></script>
	</head>
	<body>
    <div id="app1">
        <table border="1" cellpadding="0" cellspacing="0">
            <tr>
                <td>年龄</td>
                <td>
					<!--控件与js中变量绑定：获取变量的值就是获取控件的值-->
                    <select v-model="age">
                        <option v-for="option in options" v-bind:value="option.value">
                            {{ option.text }}
                        </option>
                    </select>
                </td>
            </tr>
              选择的是: {{age}}
        </table>
    </div>


    <script>
        var app1=new Vue({
            el:'#app1',
            data:{
                options: [
                    { text: '请选择', value: '0' },
                    { text: '16', value: '16' },
                    { text: '17', value: '17' },
                    { text: '18', value: '18' },
                    { text: '19', value: '19' },
                    { text: '20', value: '20' },
                    { text: '21', value: '21' },
                    { text: '22', value: '22' },
                    { text: '23', value: '23' },
                ] ,
				age:'0',
				},

       });
    </script>
</body>
</html>
